<template>
  <div class="column fullscreen text-center q-pa-md flex flex-center page-docs">
    <q-card style="max-width: 95vw; width: 340px;">

      <q-card-section>
        <q-btn flat no-caps no-wrap class="q-mt-sm">
          <q-icon :name="fabYoutube" color="red" size="34px" />
          <q-toolbar-title shrink class="text-weight-bold">
            HUI DOCS
          </q-toolbar-title>
        </q-btn>
      </q-card-section>

      <q-card-section>
        <q-input
          borderless
          no-error-icon
          hide-bottom-space
          ref="usernameRef"
          v-model="username"
          class="no-wrap q-ma-md q-pl-sm q-pr-md rounded-borders custom-input"
          label="Username"
        >
          <template v-slot:prepend>
            <q-icon name="mdi-account" />
          </template>
        </q-input>
        <q-input
          borderless
          no-error-icon
          hide-bottom-space
          ref="passwordRef"
          v-model="password"
          class="no-wrap q-ma-md q-pl-sm q-pr-md rounded-borders custom-input"
          label="Password"
        >
          <template v-slot:prepend>
            <q-icon name="mdi-lock" />
          </template>
        </q-input>
      </q-card-section>

      <q-card-actions align="center" class="q-mb-lg">
        <q-btn label="Login" color="primary" style="width: 180px" size="lg" :loading="loginLoading" @click="doLogin">
          <template v-slot:loading>
            <q-spinner-hourglass class="on-left" />
              Logining...
          </template>
        </q-btn>
      </q-card-actions>
    </q-card>
  </div>
</template>

<script setup>
//import router from "src/router/index"

import { fabYoutube } from '@quasar/extras/fontawesome-v6'
import { ref } from 'vue'
import { useRouter } from 'vue-router';
let router = useRouter()

  const username = ref('')
  const password = ref('')
  const loginLoading = ref(false)

  function doLogin() {
    loginLoading.value = true
    setTimeout(() => {
      loginLoading.value = false
      router.replace('/')
    }, 2000)
  }

  defineOptions({
    name: 'LoginPage',
  });
</script>
